<template>
	<view class="page">
		<view class="container">
			<!-- 问答列表 -->
			<view class="list-item" v-for="(item, index) in pageData.data" :key="item.id" @click="goToDetail(item)">
				<text class="item-text">{{ item.title || '各商品的发货时间' }}</text>
				<image class="arrow-icon" src="/static/svg/right-arrow.svg" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="load-status" v-if="pageData.data && pageData.data.length > 0">
			<view v-if="status === 'loading'" class="loading">
				<text class="loading-text">加载中...</text>
			</view>
			<view v-else-if="status === 'noMore'" class="no-more">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="!loading && (!pageData.data || pageData.data.length === 0)" class="empty-state">
			<text class="empty-text">暂无问答数据</text>
		</view>

		<!-- 全局加载状态 -->
		<view v-if="loading && (!pageData.data || pageData.data.length === 0)" class="global-loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { usePageData } from "../../../common/usePageData";

// 初始化搜索参数
const searchParams = ref({
	page: 1,
	size: 20,
	catalogCode:"qa"
});

// 使用 usePageData 获取分页数据和状态
const { pageData, status, searchList, loading } = usePageData('article_list', searchParams);

// 跳转到详情页面
const goToDetail = (item) => {
	// 可以根据需要跳转到相应的详情页面
	uni.navigateTo({
		url: `/pages/my/setting/qa-detail?id=${item.id}`
	});
};
</script>

<style>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.container {
	padding: 10rpx;
}

.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	background-color: #ffffff;
	margin-bottom: 2rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.item-text {
	font-size: 30rpx;
	color: #333;
}

.arrow-icon {
	width: 36rpx;
	height: 36rpx;
	opacity: 0.5;
}

/* 加载状态样式 */
.load-status {
	padding: 20rpx;
	text-align: center;
}

.loading, .no-more {
	padding: 20rpx;
}

.loading-text, .no-more-text {
	font-size: 28rpx;
	color: #999;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 全局加载状态 */
.global-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}
</style>
